<template>
  <div>
    <Chart v-if="timeMode.mode === 2  && timeMode.endTime " :cdata="cdata"/>
    <Chart2 v-if=" !timeMode.endTime" :cdata="cdata"/>
  </div>
</template>

<script>
import Chart from './chart.vue'
import Chart2 from './chart2.vue'
import { isNotEmpty } from '@/utils'

export default {
  props: {
    mapType: {},
    timeMode: {},
    apiData: {},
  },
  data() {
    return {
      cdata: {}
    }
  },
  watch: {
    apiData: {
      handler(v) {
        if (!isNotEmpty(v)) return
        if (this.timeMode.mode === 2 && this.timeMode.endTime) {
          this.cdata = this.generateData()
        } else if (this.timeMode.mode === 1 && !v.endTime) {
          this.getData()
        }
      },
      immediate: true,
      deep: true
    }
  },
  components: {
    Chart,
    Chart2
  },
  created() {
  },
  mounted() {
  },
  methods: {
    generateData() {
      const {apiData} = this
      if (!apiData || !apiData.length) {
        return {xData: [], regions: [], seriesData: []}
      }

      const xData = apiData[0].dayRecordList.map(({reportDate}) => reportDate)
      const regions = apiData.map(({areaName}) => areaName)
      const seriesData = apiData.map(({areaName, dayRecordList}) => ({
        name: areaName,
        type: 'line',
        symbol: 'circle',
        data: dayRecordList.map(({curNum}) => curNum || 0),
        smooth: false,
        symbolSize: 4
      }))

      return {xData, regions, seriesData}
    },
    getData() {

      const xData = this.apiData.map((item) => {
        return item.areaName
      })
      // 折线图数据（同比、环比），颜色数组为 ['#4cad1d', '#59566f']
      const lineSeriesData = [{
        name: '同比变化',
        type: 'line',
        data: this.apiData.map((item) => {
          return item.tongBiBianHuaLiang  + '%'
        }),
        smooth: false,
        symbol: 'circle',
        symbolSize: 4,
        // 折线节点设置：内层颜色与折线颜色一致
        itemStyle: {
          color: '#4cad1d',
          borderColor: '#4cad1d',
        },
        lineStyle: {
          color: '#4cad1d',
        },

      }]

      // 柱状图数据，颜色数组为 ['#16b3e0', '#bcb155', '#4fb31c']
      const barSeriesNames = ['警情总量', '同期警情量']
      const barColors = ['#16b3e0', '#bcb155',]
      const barSeriesData = barSeriesNames.map((name, idx) => {
        let data
        if (idx === 0) {
          data = this.apiData.map((item) => item.curNum)
        } else {
          data = this.apiData.map((item) => item.tongQiNum)
        }
        return {
          name: name,
          type: 'bar',
          data: data,
          barWidth: 14,
          itemStyle: {
            color: barColors[idx],
          }
        }
      })

      this.cdata = {xData, lineSeriesData, barSeriesData}
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
